<template>
  <div class="datacontent" v-if="listitem&&listitem!=null">
    <!-- 首页选项 -->
    <div
      class="dataList"
      v-if="listitem&&listitem.isshow==true"
      v-for="(item,index) in listitem.data"
      :key="index"
    >
      <div v-show="index==0" class="tjname">
        <label>{{item.title}}</label>
      </div>
      <!-- 订单统计 -->
      <ul v-if="index==0" class="listbox">
        <li
          :class="['order',{selected:val.itemSelected}]"
          v-for="(val,key,i) in item.data"
          :key="i"
          @click="gotoDetail(val,key)">
          <div class="label" v-text="val.title"></div>
          <div class="bigprice">{{val.today|dealta}}</div>
          <div class="smallprice">{{val.yesterday|dealta}}</div>
          <div class="month" v-if="val.month">{{val.month|dealta}}</div>
          <div class="month" v-if="!val.month">{{val.month}}</div>
          <div
            class="ratio"
            v-show="val.ratio!='0%'"
            :class="[{red:val.ratio>'0%'},{green:val.ratio<'0%'}]"
            v-text="val.ratio"></div>
          <div class="checkIcon" v-if="initState">
            <img v-show="!val.itemSelected" src="./../../assets/icon_unselected@3x.png">
            <img v-show="val.itemSelected" src="./../../assets/icon_selected@3x.png">
          </div>
        </li>
      </ul>

      <ul v-else v-show="false" class="listbox">
        <li
          v-if="key!='title'"
          :class="['noOne',{selected:val.itemSelected}]"
          v-for="(val,key,i) in item"
          :key="i"
          @click="gotoDetail(val,key)"
        >
          <div class="label" v-text="val.title"></div>

          <div class="bigprice">{{val.yesterday|dealta}}</div>
          <div class="smallprice">{{val.beforeYesterday|dealta}}</div>

          <div class="checkIcon" v-if="initState">
            <img v-show="!val.itemSelected" src="./../../assets/icon_unselected@3x.png">
            <img v-show="val.itemSelected" src="./../../assets/icon_selected@3x.png">
          </div>
        </li>
      </ul>
    </div>
    <!-- 非首页选项 -->
    <div class="dataList" v-else>
      <div class="tjname">
        <label>{{item.title}}</label>
      </div>
      <ul class="listbox">
        <li
          v-if="key!='title'"
          :class="['noOne',{selected:val.itemSelected}]"
          v-for="(val,key,i) in item.data"
          :key="i"
          @click="gotoDetail(val,key)"
        >
          <div class="label" v-text="val.title"></div>
          <div class="bigprice">{{val.today|dealta}}</div>
          <div class="smallprice">{{val.yesterday|dealta}}</div>
          <div class="checkIcon" v-if="initState">
            <img v-show="!val.itemSelected" src="./../../assets/icon_unselected@3x.png">
            <img v-show="val.itemSelected" src="./../../assets/icon_selected@3x.png">
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
import api from "./../common/api.js";
export default {
  data() {
    return {};
  },
  props: ["listitem"],
  computed: mapGetters(["initState"]),
  mounted() {},
  watch: {
    listitem: {
      handler: function(val, oldval) {
        if (!!val) {
          if (!!this.listitem) {
          }
        }
      },
      deep: true //对象内部的属性监听，也叫深度监听
    }
  },
  filters:{
     dealta: function(value) {
       if (value.indexOf(',')>-1) {
           value =value.replace(/,/g, "");
        if (value>10000&&value<100000000) {
          value=(value/10000).toFixed(2)+'万'
        }else if (value>100000000) {
          value=(value/100000000).toFixed(2)+'亿'
        }
       }
    
        return value;
    }
  },
  methods: {
    gotoDetail(item, key) {
      var configData = {};
      if (this.initState) {
        item.itemSelected = !item.itemSelected;
        var selected = window.localStorage.getItem("selectItem");
        window.localStorage.setItem(
          "saveSelect" + selected,
          JSON.stringify(this.listitem)
        );

        this.$forceUpdate();
      } else {
        var selected = window.localStorage.getItem("selectItem");
        window.sessionStorage.setItem('fromhome',2)
        switch (selected) {
          case '首页':
            configData = api.urlKey[key];
            window.sessionStorage.setItem('fromhome',1)
            break;
          case '助力':
            configData = api.param.boostDetail;
            configData.detailName = key;

            break;
          case '赚赚':
            configData = api.param.earnDetail;
            configData.detailName = key;
            break;
          case "1元拼团":
            configData = api.param.detailOnePrice;
            configData.detailName = key;

            break;
          default:
            break;
        }

        this.$router.push({
          name: "litemPage",
          params: { title: item.title, baseData: configData }
        });
      }
    }
  }
};
</script>
